import React, { Component } from 'react';
import { View, Platform, SafeAreaView, Text, Image, ActivityIndicator } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Task from './tabs/task';
import Card from './tabs/card';
import User from './tabs/user';
import Find from './tabs/find';
import Utils from '../../utils';

const TabIcons = {
    "task": {
        active: require("./assets/task-active.png"),
        focus: require("./assets/task.png")
    },
    "card": {
        active: require("./assets/card-active.png"),
        focus: require("./assets/card.png")
    },
    "find": {
        active: require("./assets/find-active.png"),
        focus: require("./assets/find.png")
    },
    "user": {
        active: require("./assets/user-active.png"),
        focus: require("./assets/user.png")
    }
}


const TabNavigator = createBottomTabNavigator({
    "task": Task,
    "card": Card,
    "find": Find,
    "user": User
}, {
        defaultNavigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, horizontal, tintColor }) => {

                const { routeName } = navigation.state;
                if (focused) {
                    return (
                        <View>
                            <Image source={TabIcons[routeName].active} style={{ width: 22, height: 22 }}></Image>
                        </View>
                    );
                }

                return (
                    <View>
                        <Image source={TabIcons[routeName].focus} style={{ width: 22, height: 22 }}></Image>
                    </View>
                );
            },
        }),
        tabBarOptions: {
            activeTintColor: "#000000"
        },
        lazy: true,
    });


const TabApp = createAppContainer(TabNavigator);




export default class Home extends Component {

    static navigationOptions = ({ navigation }) => {

        console.log("titleOptions e::", navigation)

        const titleOptions = navigation.getParam("titleOptions", {});

        return {
            // title:"搜特",
            ...titleOptions
        };
    }

    state = {
        user: null
    }


    componentDidMount() {
        Utils.getLoginInfo().then(user => {
            if (!user) {
                Utils.navigation(this.props.navigation, "/app/login");
            } else {
                this.setState({
                    user: user
                })
            }

        })
    }



    render() {

        console.log("props::", this.props);

        if (!this.state.user) {
            return (
                <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                    <View style={{
                        marginBottom:64
                    }}>
                        <ActivityIndicator size={"large"} color={"#697388"} ></ActivityIndicator>
                    </View>

                </View>
            )
        }

        return (
            <View style={{ flex: 1, backgroundColor: "#f6f6f6" }}>
                <TabApp screenProps={{ navigation: this.props.navigation }} />
            </View>
        )
    }
}